<template>
  <h-grade v-model="value1" disabled :disabled-void-icon="ChatRound" :icons="icons" :void-icon="ChatRound"></h-grade>
  <hr />
  <h-grade v-model="value1" allow-half></h-grade>
  <hr />
  <h-grade v-model="value2" :colors="colors" size="small" clearable></h-grade>
  <hr />
</template>

<script setup lang="ts">
import { ref } from "vue";
import HGrade from "./components/Rate/HRate.vue";
import {
  ChatDotRound,
  ChatLineRound,
  ChatRound,
} from "@element-plus/icons-vue";

const value1 = ref(3.7);
const value2 = ref(0);
const colors = ref(["#99A9BF", "#F7BA2A", "#FF9900"]);
const icons = [ChatRound, ChatLineRound, ChatDotRound];
</script>

<style scoped>
.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}
.demo-rate-block:last-child {
  border-right: none;
}
.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
